/**
 * Created by zheng on 2018/3/11.
 */
import Vue from 'vue';


function deepClone(vnodes, createElement) {

  function cloneVNode (vnode) {
    const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode));
    const cloned = createElement(vnode.tag, vnode.data, clonedChildren);
    cloned.text = vnode.text;
    cloned.isComment = vnode.isComment;
    cloned.componentOptions = vnode.componentOptions;
    cloned.elm = vnode.elm;
    cloned.context = vnode.context;
    cloned.ns = vnode.ns;
    cloned.isStatic = vnode.isStatic;
    cloned.key = vnode.key;

    return cloned;
  }

  const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode))
  return clonedVNodes;
}


export default{
  name: 'ZgTableColumn',
  props: {
    label: String,
    prop: String,
    dataIndex: String,
    width: String,
  },
  data() {
    return {
      isSubColumn: false,
    };
  },

  created(){

  },

  mounted(){
    var self = this;
    // this.customRender = this.$options.render;
    let owner = this.$parent;

    let column = {};
    let renderCell = null;
    column.renderCell = function(h,data){

      if(this.prop=='custom'){
        renderCell = (h,item) => {
          let k = deepClone(self.$slots.default, h)
          return k;
        }
      }else if(this.prop=='selected'){

      }else {
        renderCell = (h,item) => {
          return item[self.dataIndex]
        }
      }


      return (
          <div class="cell"
               style={
                 {
                   textOverflow: "ellipsis",
                   width: (self.width?self.width:100) +'px',
                   justifyContent:"center"
                 }
               }>

            {
              renderCell(h,data)
            }
          </div>
      );
    }


    owner.store.commit('insertColumn', {
      width: this.width,
      label: this.label,
      prop: this.prop,
      renderCell: column.renderCell,
      dataIndex: this.dataIndex
    })
  },

  render(h){
    return null;
  }
}
